<template>
  <div class="login-container">
    <div class="theme-switch">
      <el-switch
        v-model="isDark"
        inline-prompt
        :active-icon="Moon"
        :inactive-icon="Sunny"
        @change="toggleDark"
      />
      <el-color-picker
        v-model="primaryColor"
        :predefine="predefineColors"
        size="small"
        @change="setPrimaryColor"
      />
    </div>
    <div class="login-header">
      <div class="header-content">
        <img
          src="@/assets/images/logo-title.png"
          alt="logo"
          class="logo"
        />
        <div class="title">
          <h2>{{ SYSTEM_CONFIG.name }}</h2>
        </div>
      </div>
    </div>
    <div class="login-main">
      <div class="login-content">
        <div class="login-form">
          <div class="login-title">
            <div class="title">欢迎登录系统</div>
            <div class="sub-title">Welcome to login system</div>
          </div>
          <div class="login-type">
            <span class="active">账号登录</span>
          </div>
          <el-form
            ref="formRef"
            :model="loginForm"
            :rules="loginRules"
          >
            <el-form-item prop="accountName">
              <el-input
                v-model="loginForm.accountName"
                placeholder="请输入账户名"
                :prefix-icon="User"
                size="large"
              />
            </el-form-item>

            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                :prefix-icon="Lock"
                show-password
                size="large"
                @keyup.enter="handleLogin"
              />
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                :loading="loading"
                class="login-button"
                size="large"
                @click="handleLogin"
              >
                登 录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="copyright">Copyright©IOR Corporation, All Rights Reserved {{ version }}</div>
  </div>
</template>

<script setup lang="ts">
  import { SYSTEM_CONFIG } from '@/base/interface-config';
  import { useAppStore, useUserStore } from '@/store';
  import { Lock, Moon, Sunny, User } from '@element-plus/icons-vue';
  import type { FormInstance, FormRules } from 'element-plus';
  import { ElMessage } from 'element-plus';
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const userStore = useUserStore();
  const appStore = useAppStore();
  const version = SYSTEM_CONFIG.version;

  // 表单实例
  const formRef = ref<FormInstance>();

  // 加载状态
  const loading = ref(false);

  // 登录表单
  const loginForm = ref({
    accountName: '',
    password: ''
  });

  // 表单校验规则
  const loginRules: FormRules = {
    accountName: [{ required: true, message: '请输入账户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
  };

  // 主题相关
  const isDark = ref(appStore.isDark);
  const primaryColor = ref(appStore.primaryColor);
  const predefineColors = ['#409EFF', '#6366f1', '#67C23A', '#E6A23C', '#F56C6C'];

  // 切换暗黑模式
  const toggleDark = () => {
    appStore.toggleDark();
  };

  // 设置主题色
  const setPrimaryColor = (color: string | null) => {
    if (color) {
      appStore.setPrimaryColor(color);
    }
  };

  // 登录处理
  const handleLogin = async () => {
    if (!formRef.value) return;

    try {
      await formRef.value.validate();
      loading.value = true;

      const success = await userStore.login({
        accountName: loginForm.value.accountName,
        password: loginForm.value.password
      });

      if (success) {
        ElMessage.success('登录成功');
        router.push('/');
      } else {
        ElMessage.error('登录失败');
      }
    } catch (error) {
      console.error('登录失败:', error);
      ElMessage.error('登录失败');
    } finally {
      loading.value = false;
    }
  };
</script>

<style lang="scss" scoped>
  .login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    background-color: #f0f2f5;
    background-image: url('@/assets/images/login-bg.png');
    background-size: cover;
    background-position: center;

    .theme-switch {
      position: fixed;
      top: 24px;
      right: 24px;
      display: flex;
      align-items: center;
      gap: 16px;
      z-index: 10;

      :deep(.el-switch) {
        --el-switch-on-color: #6366f1;
      }

      :deep(.el-color-picker) {
        --el-color-picker-size: 24px;
      }
    }

    .login-header {
      width: 100%;
      height: 90px;
      background: #fff;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);

      .header-content {
        max-width: 1200px;
        height: 100%;
        margin: 0 auto;
        padding: 0 24px;
        display: flex;
        align-items: center;

        .logo {
          width: 156px;
          margin-right: 16px;
        }

        .title {
          h2 {
            margin: 0;
            font-size: 24px;
            color: var(--el-text-color-primary);
          }
        }
      }
    }

    .login-main {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .login-content {
      margin-top: 100px;
      width: 360px;
      padding: 32px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.25);
      .login-type {
        margin-bottom: 24px;
        border-bottom: 1px solid #eee;

        span {
          display: inline-block;
          padding: 0 20px 15px;
          font-size: 14px;
          color: #999;
          cursor: pointer;

          &.active {
            color: #333;
            font-weight: 500;
            border-bottom: 2px solid #6366f1;
            margin-bottom: -1px;
          }
        }
      }

      .login-form {
        .login-title {
          text-align: center;
          .title {
            font-size: 28px;
            font-weight: 700;
            letter-spacing: 2px;
            color: var(--el-text-color-primary);
          }
          .sub-title {
            font-size: 14px;
            color: var(--el-text-color-secondary);
          }
        }
        .login-button {
          width: 100%;
          height: 40px;
          background: var(--el-color-primary);
          border-color: var(--el-color-primary);

          &:hover {
            opacity: 0.9;
          }
        }
      }
    }

    .copyright {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background: #fff;
      margin-top: 24px;
      color: var(--el-text-color-primary);
      font-size: 14px;
      text-align: center;
    }
  }

  :deep(.el-input__wrapper) {
    background-color: #f9fafb;
    box-shadow: none;
    border: 1px solid #e5e7eb;

    &:hover {
      border-color: var(--el-color-primary);
    }

    &.is-focus {
      border-color: var(--el-color-primary);
      box-shadow: 0 0 0 1px var(--el-color-primary);
    }
  }

  :deep(.el-input__inner) {
    height: 40px;
  }
</style>
